import { useState } from 'react';
import UserForm from './components/UserForm';
import UserTable from './components/UserTable';
import { User } from './types/User';
import { Container, Typography, Button } from '@mui/material';

function App() {
  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [showForm, setShowForm] = useState(false);

  return (
    <Container maxWidth="md" sx={{ py: 4 }}>
      <Typography variant="h4" gutterBottom>
        User Management
      </Typography>
      <Button
        variant="contained"
        color="success"
        onClick={() => {
          setEditingUser(null);
          setShowForm(true);
        }}
      >
        + Add User
      </Button>

      {showForm && (
        <UserForm user={editingUser!} onClose={() => setShowForm(false)} />
      )}

      <UserTable
        onEdit={(user) => {
          setEditingUser(user);
          setShowForm(true);
        }}
      />
    </Container>
  );
}

export default App;
